<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryForm" :inline="true">
        <!-- StartDate  EndDate -->
        <el-form-item v-if="pageType == 1" prop="month">
          <el-date-picker
            v-model="queryForm.month"
            type="month"
            :clearable="false"
            placeholder="请选择月份"
            :disabled-date="disabledDate"
            @change="changeMonth"
          />
        </el-form-item>
        <el-form-item prop="areaCode">
          <el-cascader
            v-model="queryForm.areaCode"
            placeholder="请选择地区"
            :options="areaoptions"
            :clearable="true"
            @change="handleCascaderChange"
          />
        </el-form-item>
        <el-form-item prop="keywords">
          <el-input v-model="queryForm.keywords" placeholder="请输入关键字" clearable style="width: 200px" />
          <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
          <el-button type="primary" style="margin-left: 10px; border-radius: 0" @click="handleQuery">
            导出查询结果
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-space wrap>
            <el-text type="danger"><svg-icon icon-class="circlefull" /> </el-text>
            <el-text type="danger"> 未落实状态</el-text>
            <el-text type="warning"><svg-icon icon-class="circlefull" /></el-text>
            <el-text type="warning">半落实状态</el-text>
            <el-text type="info"><svg-icon icon-class="circlefull" /></el-text>
            <el-text type="info">无需落实</el-text>
            <el-text type="success"><svg-icon icon-class="circlefull" /></el-text>
            <el-text type="success">已落实状态</el-text>
          </el-space>
        </el-col>
        <el-col :span="24" :offset="0" style="margin-top: 10px">
          <el-table
            ref="tableRef"
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            :show-overflow-tooltip="{ effect: 'light' }"
            :scrollbar-always-on="true"
          >
            <el-table-column v-if="pageType == 1" align="center" label="统计月度" prop="month" min-width="100" />
            <el-table-column align="center" label="专户状态" prop="specialAccountStatus" min-width="80">
              <template #default="{ row }">
                <span v-if="row.specialAccountStatus == 1">
                  <el-text type="danger"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.specialAccountStatus == 2">
                  <el-text type="warning"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.specialAccountStatus == 3">
                  <el-text type="success"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else>
                  <el-text type="info"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="考勤状态" prop="checkinStatus" min-width="80">
              <template #default="{ row }">
                <span v-if="row.checkinStatus == 1">
                  <el-text type="danger"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.checkinStatus == 2">
                  <el-text type="warning"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.checkinStatus == 3">
                  <el-text type="success"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else>
                  <el-text type="info"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="代发状态" prop="wageStatus" min-width="80">
              <template #default="{ row }">
                <span v-if="row.wageStatus == 1">
                  <el-text type="danger"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.wageStatus == 2">
                  <el-text type="warning"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.wageStatus == 3">
                  <el-text type="success"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else>
                  <el-text type="info"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="进账状态" prop="incomeStatus" min-width="80">
              <template #default="{ row }">
                <span v-if="row.incomeStatus == 1">
                  <el-text type="danger"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.incomeStatus == 2">
                  <el-text type="warning"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.incomeStatus == 3">
                  <el-text type="success"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else>
                  <el-text type="info"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="pageType == 2"
              align="center"
              label="关键岗位考勤状态"
              prop="keyPositionCheckinStatus"
              min-width="130"
            >
              <template #default="{ row }">
                <span v-if="row.keyPositionCheckinStatus == 1">
                  <el-text type="danger"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.keyPositionCheckinStatus == 2">
                  <el-text type="warning"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else-if="row.keyPositionCheckinStatus == 3">
                  <el-text type="success"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
                <span v-else>
                  <el-text type="info"><svg-icon icon-class="circlefull" /> </el-text>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="项目名称" prop="projectName" min-width="160" />
            <!-- <el-table-column align="center" label="创建时间" prop="prjCreateTime" min-width="160" />
            <el-table-column align="center" label="项目状态" prop="prjStatusName" min-width="160" /> -->
            <el-table-column
              align="center"
              label="项目在建天数"
              prop="daysThisMonthUnderConstruction"
              min-width="130"
            />
            <el-table-column align="center" label="项目累计在建天数" prop="daysUnderConstruction" min-width="130" />
            <el-table-column align="center" label="对口部门" prop="industryTypeName" min-width="130" />
            <el-table-column align="center" label="建设单位" prop="constructorName" min-width="170" />
            <el-table-column align="center" label="施工总承包单位" prop="corpName" min-width="170" />
            <el-table-column align="center" label="专户应进账金额" prop="totalAmountDue" min-width="120" />
            <el-table-column align="center" label="实际进账金额" prop="totalActualReceipts" min-width="120" />
            <el-table-column align="center" label="应考勤人数" prop="numberAttendanceRequired" min-width="120" />
            <el-table-column align="center" label="实际考勤人数" prop="actualAttendance" min-width="120" />
            <el-table-column align="center" label="实际代发笔数" prop="numberAgencyTransactions" min-width="120" />
            <el-table-column align="center" label="代发金额" prop="paymentAmount" min-width="120" />
            <el-table-column align="center" label="代发人数" prop="numberProxyRecipients" min-width="120" />
            <el-table-column align="center" label="专户余额" prop="balance" min-width="120" />
            <el-table-column
              align="center"
              label="项目经理考勤天数"
              prop="projectManagerAttendanceDays"
              min-width="130"
            />
            <el-table-column
              align="center"
              label="技术负责人考勤天数"
              prop="technicalManagerAttendanceDays"
              min-width="150"
            />
            <el-table-column align="center" label="安全员考勤天数" prop="safetyOfficerAttendanceDays" min-width="120" />
            <el-table-column
              align="center"
              label="总监理工程师考勤天数"
              prop="supervisionAttendanceDays"
              min-width="160"
            />
            <el-table-column v-if="pageType == 1" align="center" label="统计时间" prop="createTime" min-width="150" />
            <!-- <el-table-column v-if="pageType == 1" align="center" label="锁定时间" prop="createTime" min-width="150" />
            <el-table-column v-if="pageType == 1" align="center" label="解锁时间" prop="createTime" min-width="150" /> -->
            <!-- <el-table-column align="center" label="操作" fixed="right" min-width="80">
              <template #default="scope">
                <el-button type="primary" link size="small" @click="handelDetail(scope.row)"> 详情 </el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryForm.pageNum"
            v-model:limit="queryForm.pageSize"
            @pagination="handleQuery"
          />
        </el-col>
      </el-row>
    </div>
    <detail :dialog-detail="dialogDetail" @send-close="sendClose" />
  </div>
</template>
<script setup lang="ts">
import detail from "./detail.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { QueryReportProjectMonth } from "@/api/admin/statistical/index";
import { downloadFile } from "@/utils";
import { getDicts } from "@/store/modules/dict";
import moment from "moment";
const loading = ref(false);
const tableData = ref();
const areaoptions = getDicts("areaTrees").filter((item: { value: number }) => item.value === 540000);

const pageType = ref(1); //1 月度统计报表 2 项目信息一览

const dialogDetail = reactive<DialogOption>({
  visible: false,
});
const tableRef = ref();

/**
 * 禁用日期
 */
const disabledDate = (time: Date) => {
  return time.getTime() > moment().add(-1, "months").toDate().getTime();
};

const changeMonth = function (val: any) {
  queryForm.month = moment(val).format("YYYYMM");
};

//详情
const handelDetail = function (row: any) {
  dialogDetail.visible = true;
  dialogDetail.id = row.projectId;
  dialogDetail.title = "详情";
};

const sendClose = function (needRefresh: boolean) {
  dialogDetail.visible = false;
  dialogDetail.id = undefined;
  if (needRefresh) {
    handleQuery();
  }
};

//查询条件
const queryForm = reactive({
  month: moment().format("YYYYMM"),
  keywords: "",
  pageNum: 1,
  pageSize: 10,
  provinceCode: undefined,
  cityCode: undefined,
  areaCode: undefined,
});
const total = ref(0);

//城市联动赋值
const handleCascaderChange = (value: any) => {
  if (value.length == 3) {
    queryForm.provinceCode = value[0];
    queryForm.cityCode = value[1];
    queryForm.areaCode = value[2];
  }
  // 在这里可以对选中的值进行进一步处理
};

//这是列表数据
const handleQuery = function () {
  loading.value = true;
  QueryReportProjectMonth(queryForm)
    .then((res) => {
      if (res.type === 0) {
        if (res.success) {
          tableData.value = res.data.list;
          queryForm.pageNum = res.data.pageNum;
          queryForm.pageSize = res.data.pageSize;
          total.value = res.data.total;
        } else {
        }
      } else {
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
:deep(.el-button) {
  margin-left: 5px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 5px;
}
</style>
